<template>
  <div class="goucai">
   <div class="maincontent ">
    <div class="kinds">
      <h2>全部彩种</h2>
      <div class="kinds-box" v-for="item in items">
        <div class="kinds-cell">
          <router-link :to=getBetUrl(item.type) class="icon ssq">
            <img :src="item.img">
          </router-link>
          <div class="kind-data-box">
            <router-link :to=getBetUrl(item.type) class="icon ssq">
            <h3><span class="kind">{{item.gameName}}</span> <span class="period">第{{item.openSessionNo}}期</span></h3>
            <p>{{item.explain}}</p>
            <div class="open-number" v-if="'4'===item.type || '18' === item.type">
              <span class="num bg-red">{{item.openResult[0]}}</span><span>+</span>
              <span class="num bg-red">{{item.openResult[1]}}</span><span>+</span>
              <span class="num bg-red">{{item.openResult[2]}}</span><span>=</span>
              <span class="num" v-bind:class="ballCol2(item.openResult[4])">{{item.openResult[3]}}</span>
            </div>
            <div class="open-number" v-else-if="'17'===item.type">
              <span class="num bg-red" v-for="(subItem, index) in item.openResult" v-if="index <5">{{subItem}}
              </span>
              <span>=</span>
              <span class="num bg-red">{{item.openResult[5]}}
              </span>
            </div>
            <div class="open-number" v-else>
              <span class="num" v-for="(subItem, index) in item.openResult"  v-bind:class="ballColor(item.type,index)">{{subItem}}
              </span>
            </div>
            </router-link>
            <div class="buttons">
              <router-link :to=getOpenUrl(item.type)>开奖公告</router-link> 
              <router-link :to=getBetUrl(item.type)>我要投注</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  </div>
</template>

<script>
export default {
  name: 'goucai',
  data () {
    return {
      items: []
    }
  },
  methods: {
    //双色球颜色
    ballColor:function(e,i){
      if ("13"=== e && 6 === i) {
        //双色球
        return "bg-blue"
      }else{
        return "bg-red"
      }
    },
    //加拿大幸运28与北京幸运28波色
    ballCol2:function(i){
      if (0 === i) {
        return "bg-white"
      }else if(1 === i){
        return "bg-green"
      }else if(2 === i){
        return "bg-blue"
      }else if(3 === i){
        return "bg-red"
      }else{
        return "bg-red"
      }
    },
    //购彩大厅
    getLatestList: function(){
      this.$http.get('api/api/baseData_latestList').then((response) => {
        console.log(response.data.code);
        var code = response.data.code;
        if ( '200'=== code ) {
          var result = response.data.data;
          this.items = result.items;
        }
      })
    },
    //投注url
    getBetUrl: function(i){
      if("3" === i){
        return "/cqsscBet/cqsscBar/6"
      }else if("4" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("9" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("13" === i){
        return "/ssqBet/ssqCheckBall"
      }else if("14" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("15" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("17" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("18" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }
    },
    //开奖url
    getOpenUrl: function(i){
      if("3" === i){
        return "/kaijiang/cqSscOpenList"
      }else if("4" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("9" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("13" === i){
        return "/ssqBet/ssqCheckBall/ssqCheckBall"
      }else if("14" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("15" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("17" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }else if("18" === i){
        return "/cqsscBet/cqsscBar/6/6"
      }
    }
  },
  created:function() {
    this.getLatestList();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-content{margin: 10px auto;}
.kinds h2 {background: #fcfcfc;text-shadow: 0 1px rgba(255,255,255,0.9);border-bottom: 1px solid #eee;font-size: 13px;line-height: 32px;padding: 0 0 0 15px;font-weight: normal;margin: 10px 0;}
.kinds-box{}
.kinds-box .kinds-cell{}
.kinds-box .kinds-cellnth-child(3n+1){margin-left: 15px;}
.kinds-box .kinds-cell {float: left;border: 1px solid #f0f0f0;overflow: hidden;background: #fcfcfc;margin: 15px 15px 15px 0;width: 313px;padding: 10px;border-radius: 5px;}

.kinds-box .kinds-cell .icon {flex: 0 0 90px;width: 90px;}
.kinds-box .kinds-cell .icon img{width: 60px;}
.kinds-box .kinds-cell .kind-data-box{width: 210px;float: right;}
.kinds-box .kinds-cell .kind-data-box h3 {margin: 0 0 7px 0;font-size: 14px;}
.kinds-box .kinds-cell .kind-data-box h3 .period {color: #ba2636;}
.kinds-box .kinds-cell .kind-data-box p {text-overflow: ellipsis;overflow: hidden;white-space: nowrap; margin: 0 0 7px 0;font-size: 12px;}
.kinds-box .kinds-cell .kind-data-box .buttons{overflow: hidden;}
.kinds-box .kinds-cell .kind-data-box .buttons a {color: white;background: #e60000;font-size: 13px;border-radius: 4px;padding: 0 8px;line-height: 22px;display: block;float: right;margin:5px 5px 0 0;}

.kinds-menu{width: 190px;float: left;border: 1px solid#bc2218;}
.kinds-menu h2 {color: white;background: #bc2218;}
.kinds-menu h2 {font-weight: normal;font-size: 16px;line-height: 41px;text-align: center;margin: 0;}
.kinds-menu h3 {color: #e60000;padding: 10px;margin: 0;line-height: 27px;font-size: 18px;font-weight: normal;}
.kinds-menu ul {border-bottom: 1px solid #bc2218;}
.kinds-menu ul li {margin: 0;padding: 0 0 0 10px;list-style: none;line-height: 31px;}
.kinds-menu ul li a{color: #444;}
.kinds-menu ul li.selected {background: #f00000;}
.kinds-menu ul:last-child {border-bottom: none;}

</style>
